<template>
  <!-- 登录组件 -->
  <div id="login">
    <!-- 登录头部 -->
    <div class="loginHeader">
      <!-- 关闭按钮，点击时调用hideLogin -->
      <i class="iconfont icon-guanbi" @click="hideLogin"></i>
    </div>
    <!-- <iframe src="http://120.25.126.174:8160/api/ucenter/wx/login" height="400" name="tom"></iframe> -->
    <!-- 登录主内容 -->
    <div class="loginMain">
      <!-- 标签 -->
      <div class="label">
        <!-- 验证码登录按钮，点击时调用loginMode，并修改样式 -->
        <button :class="nowLoginMode === 0 && 'select'" @click="loginMode(0)">
          验证码登录
        </button>
        <!-- 密码登录按钮，点击时调用loginMode，并修改样式 -->
        <button :class="nowLoginMode === 1 && 'select'" @click="loginMode(1)">
          密码登录
        </button>
        <!-- 密码登录按钮，点击时调用loginMode，并修改样式 -->
        <button :class="nowLoginMode === 2 && 'select'" @click="loginMode(2)">
          邮箱登录
        </button>
      </div>
      <!-- 验证码登录内容 -->
      <div class="labelMain" v-if="nowLoginMode === 0">
        <!-- <input type="text" placeholder="手机号" />
        <input type="text" placeholder="验证码" /> -->
        <!-- 手机号输入框容器 -->
        <!-- 当手机号错误时修改样式 -->
        <div
          class="inputWap"
          :style="phoneError ? 'border: rgb(255, 190, 100) 1px solid;' : ''"
        >
          <!-- 手机号输入框,双向数据绑定 -->
          <!-- @input当输入框的值发生改变时触发setPhone事件 -->
          <input
            type="text"
            placeholder="手机号"
            class="phone"
            v-model="phone"
            @input="setPhone($event)"
          />
        </div>
        <!-- 验证码输入框容器 -->
        <div class="inputWap">
          <!-- 验证码输入框 -->
          <input
            type="text"
            placeholder="验证码"
            class="verify"
            v-model="verify"
            @keydown.enter="logging"
          />
          <!-- 获取验证码按钮,点击后调用getVerify -->
          <div class="getVerify" @click="getVerify" v-if="!isGetVerify">
            <span>获取验证码</span>
          </div>
          <!-- 已获取倒计时 -->
          <div class="getVerify" v-if="isGetVerify">
            <span>已获取{{ phoneCountDown }}s</span>
          </div>
        </div>
        <!-- 提示和忘记密码容器 -->
        <div class="resetPassword">
          <!-- 提示容器 -->
          <div class="tip" v-if="phoneError">{{ tips }}</div>
          <!-- 忘记密码容器 -->
          <span></span>
        </div>
        <!-- 登录/注册按钮 -->
        <button class="loginBtn" @click="logging">登录/注册</button>
      </div>
      <!-- 密码登录内容 -->
      <div class="labelMain" v-if="nowLoginMode === 1">
        <!-- 手机号输入框容器 -->
        <!-- 当手机号错误时修改样式 -->
        <div
          class="inputWap"
          :style="phoneError ? 'border: rgb(255, 190, 100) 1px solid;' : ''"
        >
          <!-- 手机号输入框 -->
          <!-- 输入框的值改变时调用setPhone -->
          <input
            type="text"
            placeholder="手机号"
            class="phone"
            v-model="phone"
            @input="setPhone($event)"
          />
        </div>
        <!-- 密码输入框容器 -->
        <div class="inputWap">
          <!-- 密码输入框 -->
          <input
            type="text"
            placeholder="密码"
            class="password"
            v-model="password"
            @keydown.enter="logging"
          />
        </div>
        <!-- 提示和找回密码容器 -->
        <div class="resetPassword">
          <!-- 提示 -->
          <div class="tip" v-show="phoneError">{{ tips }}</div>
          <div></div>
          <!-- 找回密码 -->
          <span>找回密码</span>
        </div>
        <!-- 登录按钮 -->
        <button class="loginBtn" @click="logging">登录</button>
      </div>
      <!-- 邮箱登录内容 -->
      <div class="labelMain" v-if="nowLoginMode === 2">
        <!-- <input type="text" placeholder="手机号" />
        <input type="text" placeholder="验证码" /> -->
        <!-- 邮箱输入框容器 -->
        <!-- 当邮箱错误时修改样式 -->
        <div
          class="inputWap"
          :style="emailError ? 'border: rgb(255, 190, 100) 1px solid;' : ''"
        >
          <!-- 邮箱输入框,双向数据绑定 -->
          <!-- @input当输入框的值发生改变时触发setPhone事件 -->
          <input
            type="text"
            placeholder="邮箱"
            class="phone"
            v-model="email"
            @blur="setEmail($event)"
          />
        </div>
        <!-- 验证码输入框容器 -->
        <div class="inputWap">
          <!-- 验证码输入框 -->
          <input
            type="text"
            placeholder="验证码"
            class="verify"
            v-model="emailVerify"
            @keydown.enter="logging"
          />
          <!-- 获取验证码按钮,点击后调用getVerify -->
          <div
            class="getVerify"
            @click="getEmailVerify"
            v-if="!isGetEmailVerify"
          >
            <span>获取验证码</span>
          </div>
          <!-- 已获取倒计时 -->
          <div class="getVerify" v-if="isGetEmailVerify">
            <span>已获取{{ emailCountDown }}s</span>
          </div>
        </div>
        <!-- 提示和忘记密码容器 -->
        <div class="resetPassword">
          <!-- 提示容器 -->
          <div class="tip" v-if="emailError">{{ tips }}</div>
          <!-- 忘记密码容器 -->
          <span></span>
        </div>
        <!-- 登录/注册按钮 -->
        <button class="loginBtn" @click="logging">登录/注册</button>
      </div>
      <!-- <button class="loginBtn">登录/注册</button> -->
      <!-- 活动 -->
      <span class="activity">新注册用户即可免费获得30天高级版</span>
      <!-- 社交账号登录 -->
      <p>社交账号登录</p>
      <!-- 微信和qq登录容器 -->
      <div class="otherLogin">
        <!-- qq登录按钮 -->
        <i class="iconfont icon-qq"></i>
        <!-- 微信登录按钮 -->
        <i class="iconfont icon-weixin"></i>
        <!-- 邮箱登录 -->
        <!-- <i class="iconfont icon-youxiang"></i> -->
      </div>
      <!-- 登录协议 -->
      <div class="loginProtocol">
        登录/注册即为同意氢记
        <button class="ToS">服务条款、</button>
        <button class="privacyPolicy">隐私政策</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      // 当前选择的登录模式，0为验证码登录，1为密码登录，2为邮箱登录
      nowLoginMode: 0,
      // 手机号
      phone: "",
      // 手机号错误
      phoneError: false,
      // 邮箱号
      email: "",
      // 邮箱号错误
      emailError: false,
      // 错误原因提示文本
      tips: "",
      // 验证码
      verify: "",
      // 密码
      password: "",
      // 邮箱验证码
      emailVerify: "",
      // 是否正在获取邮箱验证码
      isGetEmailVerify: false,
      //邮箱倒计时
      emailCountDown: 60,
      // 是否正在获取手机验证码
      isGetVerify:false,
      //手机倒计时
      phoneCountDown: 60,
    };
  },
  methods: {
    // 登录模式，0为验证码登录，1为密码登录
    loginMode(index) {
      // 如果当前登录模式不为index
      if (this.nowLoginMode !== index) {
        // 修改登录模式
        this.nowLoginMode = index;
      }
    },
    // 隐藏登录组件
    hideLogin() {
      // 隐藏登录组件
      this.$store.commit("setIsShowLogin", false);
    },
    // 获取验证码
    getVerify() {
      console.log("获取验证码");
      // 如果输入的邮箱不为空
      if (this.phone !== "") {
        this.isGetVerify = true;
        let timer1 = setInterval(() => {
          this.phoneCountDown--;
          if (this.phoneCountDown === 0) {
            clearInterval(timer1);
            this.phoneCountDown = 60;
            this.isGetVerify = false;
          }
        }, 1000);
      } else {
        // 设置提示语
        this.tips = "手机号不能为空";
        // 邮箱错误
        this.phoneError = true;
      }
    },
    // 获取邮箱验证码
    async getEmailVerify() {
      // 如果输入的邮箱没错
      if (!this.emailError) {
        const { data: res } = await this.$http.getEmailVerify(this.email);
        console.log(res);
        this.isGetEmailVerify = true;
        let timer = setInterval(() => {
          this.emailCountDown--;
          if (this.emailCountDown === 0) {
            clearInterval(timer);
            this.emailCountDown = 60;
            this.isGetEmailVerify = false;
          }
        }, 1000);
      }
    },
    // 设置手机号输入框
    setPhone(e) {
      // 如果输入框的值不为空
      if (e.target.value != "") {
        // 获取最后一个字符的索引
        let index = e.target.value.length - 1;
        // 获取最后一个字符
        let last = e.target.value[index];
        // 如果输入的最后一个字符不是数字
        if (last.search(/[0-9]/) == -1) {
          // 将最后一个字符去除,实现纯数字
          this.phone = e.target.value.slice(0, index);
        }
      }
      // 如果输入的字符串大于等于11
      if (this.phone.length >= 11) {
        // 实时截取字符串,实现最多输入11的数字
        this.phone = e.target.value.slice(0, 11);
        // console.log(this.phone);
        // 判断是否为手机号
        if (
          this.phone.search(
            /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
          ) == -1
        ) {
          // 设置提示语
          this.tips = "请输入正确的手机号";
          // 手机号错误
          this.phoneError = true;
        }
      } else {
        // 手机号默认
        this.phoneError = false;
        // 清空提示语
        this.tips = "";
      }
    },
    // 设置邮箱号输入框
    setEmail(e) {
      this.email = e.target.value;
      if (this.email != "") {
        if (
          this.email.search(/^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/) ==
          -1
        ) {
          // 设置提示语
          this.tips = "请输入正确的邮箱";
          // 邮箱错误
          this.emailError = true;
        } else {
          this.emailError = false;
          // 清空提示语
          this.tips = "";
        }
      } else {
        // 设置提示语
        this.tips = "邮箱不能为空";
        // 邮箱错误
        this.emailError = true;
      }
    },
    // 登录
    async logging() {
      // 验证码登录
      if (this.nowLoginMode == 0) {
        console.log(this.phone);
        console.log(this.verify);
      } else if (this.nowLoginMode == 1) {
        // 密码登录
        console.log(this.phone);
        console.log(this.password);
      } else {
        // 邮箱登录
        let emailInfo = { code: this.emailVerify, email: this.email };
        // 请求登录
        const { data: res } = await this.$http.emailLogin(emailInfo);
        console.log(res);
        // 如果不成功
        if (res.code != 20000) {
          // 设置提示语
          this.tips = "验证码错误,请重新登录";
          // 邮箱错误
          this.emailError = true;
        } else {
          console.log("登录成功");
          // 将token保存到sessionStorage
          window.sessionStorage.setItem("token", res.data.token);
          // 跳转到个人中心页面
          this.$router.push("/user");
          // 隐藏登录组件
          this.$store.commit("setIsShowLogin", false);
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
// 登录组件
#login {
  // 宽
  width: 375px;
  // height: 500px;
  // 背景颜色
  background-color: white;
  // 绝对定位
  position: absolute;
  // 水平垂直居中
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  // 圆角
  border-radius: 10px;
  // 层级
  z-index: 1002;
  iframe {
    border: none;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
  // 头部
  .loginHeader {
    // 宽高
    width: 100%;
    height: 40px;
    // background-color: rosybrown;
    // 弹性盒
    display: flex;
    // 子元素往主轴尾部靠
    justify-content: flex-end;
    // 关闭按钮
    .icon-guanbi {
      // 右外边距和上外边距
      margin-right: 20px;
      margin-top: 20px;
      // 字体大小
      font-size: 12px;
      // 小手
      cursor: pointer;
      // 粗体
      font-weight: bold;
      // 鼠标移入时
      &:hover {
        color: #0182c7;
      }
    }
  }
  // 登录主内容
  .loginMain {
    // 宽度
    width: 100%;
    // height: 200px;
    // background-color: royalblue;
    // 弹性盒
    display: flex;
    // 主轴自上向下
    flex-direction: column;
    // 子元素水平居中
    align-items: center;
    // 标签栏
    .label {
      // 宽
      width: 100%;
      // height: 30px;
      // background-color: sandybrown;
      // 弹性盒
      display: flex;
      // 子元素水平居中
      justify-content: center;
      // 底部外边距
      margin-bottom: 10px;
      // 标签按钮
      button {
        // 高
        height: 20px;
        // 字体大小
        font-size: 16px;
        // font-weight: bold;
        // 背景颜色
        background-color: transparent;
        // 内边距
        padding: 5px 0;
        // 右外边距
        margin-right: 20px;
        // 小手
        cursor: pointer;
        // 字体颜色
        color: #3c3c3c;
        // 宽高为内容区大小
        box-sizing: content-box;
      }
      // 选中时的样式
      .select {
        // 粗体
        font-weight: bold;
        // 字体颜色
        color: #0182c7;
        // 底部边框
        border-bottom: 2px solid #0182c7;
      }
    }
    // 标签内容
    .labelMain {
      // 宽
      width: 100%;
      // height: 100px;
      // background-color: #0182c7;
      // 弹性盒
      display: flex;
      // 子元素自上向下排列
      flex-direction: column;
      // 子元素水平居中
      align-items: center;
      // input {
      //   width: 80%;
      //   height: 50px;
      //   border-radius: 5px;
      //   margin-top: 10px;
      //   outline: none;
      //   padding: 0 10px;
      //   font-size: 16px;
      //   background-color: #d9f2ff;
      // }
      // 输入框包裹器
      .inputWap {
        // 宽高
        width: 75%;
        height: 50px;
        // 圆角
        border-radius: 5px;
        // 顶部外边距
        margin-top: 10px;
        // 背景颜色
        background-color: #e3f4fd;
        // 弹性盒
        display: flex;
        // 子元素往两边靠
        justify-content: space-between;
        // 边框
        border: 1px solid #e3f4fd;
        // box-sizing: content-box;
        // 输入框
        input {
          // 高度
          height: 100%;
          // 圆角
          border-radius: 5px;
          // 内边距
          padding: 0 10px;
          // 背景颜色
          background-color: transparent;
          // 清除轮廓
          outline: none;
          // 字体大小
          font-size: 16px;
          // color: #0182c7;
        }
        // 手机号输入框宽度
        .phone {
          width: 100%;
        }
        // 验证码输入框宽度
        .verify {
          width: 60%;
        }
        // 密码输入框宽度
        .password {
          width: 100%;
        }
        // 获取验证码按钮
        .getVerify {
          // width: 40%;
          // 字体大小
          font-size: 14px;
          // 字体颜色
          color: #0182c7;
          // 弹性盒
          display: flex;
          // 子元素水平居中
          align-items: center;
          // 内边距
          padding: 0 20px;
          span {
            // 小手
            cursor: pointer;
            // 鼠标移入获取验证码时
            &:hover {
              // box-shadow: 0 0 10px #9cdafc;
              // 背景颜色
              background-color: #d1efff;
            }
          }
        }
        // 鼠标移入输入框包裹器时
        &:hover {
          // 边框
          border: 1px solid #0182c7;
        }
      }
      // 提示和忘记密码
      .resetPassword {
        // 宽高
        width: 75%;
        height: 40px;
        // 弹性盒
        display: flex;
        // 子元素往两边靠
        justify-content: space-between;
        // 子元素垂直居中
        align-items: center;
        // 字体大小
        font-size: 14px;
        // 忘记密码
        span {
          // 字体颜色
          color: #0182c7;
          // 小手
          cursor: pointer;
        }
        // 提示
        .tip {
          // 宽
          width: 70%;
          // 背景颜色
          background-color: rgb(255, 241, 204);
          // 内边距
          padding: 2px 10px;
          // 字体颜色
          color: rgb(221, 79, 67);
          // 圆角
          border-radius: 5px;
        }
      }
      // 登录按钮
      .loginBtn {
        // 宽高
        width: 75%;
        height: 50px;
        // 背景颜色
        background-color: #0182c7;
        // 字体颜色
        color: white;
        // 圆角
        border-radius: 5px;
        // margin-top: 40px;
        // 字体大小
        font-size: 16px;
        // 小手
        cursor: pointer;
        // 鼠标移入时
        &:hover {
          // 背景颜色
          background-color: rgba(1, 130, 199, 0.7);
        }
      }
    }
    // 活动
    .activity {
      // 字体大小
      font-size: 12px;
      // 字体颜色
      color: #0182c7;
      // 内边距
      padding: 5px;
      // 背景颜色
      background-color: rgba(1, 130, 199, 0.2);
      // 顶部外边距
      margin-top: 10px;
      // 圆角
      border-radius: 5px;
    }
    // 社交账号登录分割线
    p {
      // width: 75%;
      // 左右边框
      border-right: 95px solid rgba(1, 130, 199, 0.3);
      border-left: 95px solid rgba(1, 130, 199, 0.3);
      // 行高
      line-height: 1px;
      // 字体大小
      font-size: 12px;
      // 字体颜色
      color: #0182c7;
      // 外边距
      margin: 20px 0;
      // 文字不换行
      white-space: nowrap;
      // box-sizing: content-box;
      // 内边距
      padding: 0 10px;
    }
    // 其他登录方式
    .otherLogin {
      // 宽
      width: 75%;
      // height: 50px;
      // background-color: antiquewhite;
      // 弹性盒
      display: flex;
      // 子元素水平居中
      justify-content: center;
      // qq登录
      .icon-qq {
        // 圆角
        border-radius: 50%;
        // 图标大小
        font-size: 30px;
        // 右外边距
        margin-right: 30px;
        // 小手
        cursor: pointer;
        // 内边距
        padding: 5px;
        // 图标颜色
        color: rgb(51, 153, 221);
        // 鼠标移入时
        &:hover {
          // 背景颜色
          background-color: rgba(1, 130, 199, 0.2);
        }
      }
      // 微信登录
      .icon-weixin {
        // 图标大小
        font-size: 32px;
        // 小手
        cursor: pointer;
        // 图标颜色
        color: rgb(44, 212, 133);
        // 内边距
        padding: 5px;
        // 圆角
        border-radius: 50%;
        // 鼠标移入时
        &:hover {
          // 背景颜色
          background-color: rgba(1, 130, 199, 0.2);
        }
      }
      .icon-youxiang {
        // 图标大小
        font-size: 32px;
        // 小手
        cursor: pointer;
        // 图标颜色
        color: rgb(9, 69, 59);
        // 内边距
        padding: 5px;
        // 圆角
        border-radius: 50%;
        // 鼠标移入时
        &:hover {
          // 背景颜色
          background-color: rgba(1, 130, 199, 0.2);
        }
      }
    }
    // 登录协议
    .loginProtocol {
      // 宽度
      width: 75%;
      // height: 50px;
      // background-color: rosybrown;
      // 字体大小
      font-size: 12px;
      // 字体颜色
      color: #3c3c3c;
      // 弹性盒
      display: flex;
      // 子元素水平居中
      justify-content: center;
      // 外边距
      margin: 10px 0 30px;
      // 按钮
      button {
        // 字体颜色
        color: #0182c7;
        // 背景颜色
        background-color: transparent;
        // 字体大小
        font-size: 12px;
        // 小手
        cursor: pointer;
      }
    }
  }
}
// 宽度小于375时
@media (max-width: 375px) {
  // 登录组件
  #login {
    // 宽度
    width: 100%;
  }
}
</style>